<template>
  <div class="approver-config">
    <a-form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="审核类型" required>
        <a-select v-model:value="formData.type" style="width: 100%">
          <a-select-option value="user">指定用户</a-select-option>
          <a-select-option value="role">指定角色</a-select-option>
          <a-select-option value="dept">指定部门</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="审核人" required>
        <a-select
          v-model:value="formData.approvers"
          mode="multiple"
          style="width: 100%"
          :options="approverOptions"
          :loading="loading"
          @search="handleSearch"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { computed, onMounted, ref, watch } from 'vue'
import { useBpmnModeler, useBpmnSelectedElem } from '/@/config/app.hooks'

export default {
  name: 'ApproverConfig',
  setup() {
    const bpmnModeler = useBpmnModeler()
    const bpmnSelectedElem = useBpmnSelectedElem()
    const loading = ref(false)
    const approverOptions = ref([])

    const formData = ref({
      type: 'user',
      approvers: []
    })

    const updateFormData = () => {
      const selectedElem = bpmnSelectedElem.value
      if (!selectedElem) {
        return
      }
      const bo = selectedElem.businessObject
      const extensionElements = bo.get('extensionElements')
      if (extensionElements) {
        const values = extensionElements.values
        const approverConfig = values.find(v => v.$type === 'smart:ApproverConfig')
        if (approverConfig) {
          formData.value = {
            type: approverConfig.type || 'user',
            approvers: approverConfig.approvers || []
          }
        }
      }
    }

    watch(() => bpmnSelectedElem.value, () => {
      updateFormData()
    }, { immediate: true })

    watch(() => formData.value, (val) => {
      const selectedElem = bpmnSelectedElem.value
      if (!selectedElem) {
        return
      }
      const modeling = bpmnModeler.value.get('modeling')
      const bo = selectedElem.businessObject
      const extensionElements = bo.get('extensionElements') || bpmnModeler.value.get('moddle').create('bpmn:ExtensionElements')
      const approverConfig = bpmnModeler.value.get('moddle').create('smart:ApproverConfig', {
        type: val.type,
        approvers: val.approvers
      })
      extensionElements.values = [approverConfig]
      modeling.updateProperties(selectedElem, {
        extensionElements
      })
    }, { deep: true })

    const handleSearch = async (value) => {
      loading.value = true
      try {
        // 这里应该调用实际的API来获取选项
        approverOptions.value = [
          { label: '用户1', value: 'user1' },
          { label: '用户2', value: 'user2' }
        ]
      } finally {
        loading.value = false
      }
    }

    return {
      formData,
      loading,
      approverOptions,
      handleSearch
    }
  }
}
</script>

<style scoped>
.approver-config {
  padding: 12px;
}
</style>
